<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
    request.setAttribute("contextPath", request.getContextPath());
%>
<html >
  <head>
    <meta charset="utf-8">
    <title>慧驾在线书城</title>
    <meta name="查看port" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

<!-- Bootstrap style --> 
    <link id="callCss" rel="stylesheet" href="${contextPath }/themes/bootshop/bootstrap.min.css" media="screen"/>
    <link href="${contextPath }/themes/css/base.css" rel="stylesheet" media="screen"/>
<!-- Bootstrap style responsive -->	
	<link href="${contextPath }/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
	<link href="${contextPath }/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Google-code-prettify -->	
	<link href="${contextPath }/themes/js/google-code-prettify/prettify.css" rel="stylesheet"/>
<!-- fav and touch icons -->
    <link rel="shortcut icon" href="${contextPath }/themes/images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="${contextPath }/themes/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${contextPath }/themes/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${contextPath }/themes/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="${contextPath }/themes/images/ico/apple-touch-icon-57-precomposed.png">
	<style type="text/css" id="enject"></style>
  </head>
<body>
<div id="header">
<div class="container">
<div id="welcomeLine" class="row">

<!-- 显示在右上角 显示登录用户名 -->
	<div class="span6">Welcome 
		<!-- change -->
		<c:if test="${not empty LOGIN_USER_KEY_IN_SESSION }">
		<b>${LOGIN_USER_KEY_IN_SESSION.userName }</b>
		</c:if>
	</div>

</div>
<!-- Navbar ================================================== -->
<div id="logoArea" class="navbar">
<a id="smallScreen" data-target="#topMenu" data-toggle="collapse" class="btn btn-navbar">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</a>
  <div class="navbar-inner">
  
  <!-- 慧驾书城那个图片 -->
    <a class="brand" href="${contextPath }/index"><img src="${contextPath }/themes/images/logo.png" alt="Bootsshop"/></a>
       
    <ul id="topMenu" class="nav pull-right">

	 <li class="">
	 
	 <!-- 搜索栏     登录按钮 -->
	 <c:if test="${empty LOGIN_USER_KEY_IN_SESSION }">
	 <a href="${contextPath }/gotoLogin" role="button" data-toggle="modal" style="padding-right:0"><span class="btn btn-large btn-success">登录</span></a>
	 </c:if>
	 <c:if test="${not empty LOGIN_USER_KEY_IN_SESSION }">
	 <table>
	 <c:if test="${userRole.roleName!='普通用户' }">
	 <input type="button" name="manage" value="管理员" onclick="location=('${contextPath }/admin')"/>
	 </c:if>
	 <input type="button" name="manage" value="退出" onclick="location=('${contextPath }/logout')"/>
	 </table>
	 </c:if>
	</li>
    </ul>
  </div>
</div>
</div>
</div>
<!-- Header End====================================================================== -->

<div id="mainBody">
	<div class="container">
	<div class="row">
<!-- Sidebar ================================================== -->
	<div id="sidebar" class="span3">

		<ul id="sideManu" class="nav nav-tabs nav-stacked">
		
			<!-- 左栏     显示所有书、特价书、类别等栏目 -->
			<li><a class="active" href="${contextPath }/showallbooks">所有图书</a></li>
			<li><a href="${contextPath }/showBookSpecials">特价图书</a></li>
			<li class="subMenu open"><a> 所有分类</a>

				<!-- 类别 -->
				<ul>
				<c:forEach items="${category }" var="category">
					<li><a href="${contextPath }/filter/${category.categoryId }"><option>${category.categoryName }</option></a></li>
				</c:forEach>
				</ul>
			</li>
		</ul>
		<br/>
	
		
	</div>
<!-- Sidebar end=============================================== -->
<!-- <a href="javaScript:history.go(-1)" data-toggle="modal" style="padding-right:0"><span class="btn btn-large btn-success">返回</span></a> -->
	<br/>
			<div class="span9">
    <ul class="breadcrumb">
    <li><a href="${contextPath }/index">主页</a> <span class="divider">/</span></li>
<!--     <li><a href="products.html">图书列表</a> <span class="divider">/</span></li> -->
    <li class="active">图书信息</li>
    </ul>	
	<div class="row">	  
			<c:forEach items="${list }" var="map">
			<div id="gallery" class="span3">
            <a href="${contextPath }/themes/images/products/large/f1.jpg" title="${map.bookName }">
				<img src="${contextPath }/themes/images/products/large/3.jpg" style="width:100%" alt="${map.bookName }"/>
            </a>
			</div>
			<div class="span6">
				<h3>${map.bookName } </h3>
				<small>${map.bookAuthor }</small>
				<hr class="soft"/>
				<c:if test="${not empty LOGIN_USER_KEY_IN_SESSION }">
				<form class="form-horizontal qtyFrm" action="${contextPath}/order/${LOGIN_USER_KEY_IN_SESSION.userId}/${map.bookId}" method="post">
				  <div class="control-group">
					<label class="control-label"><div>特价<span class="divider">/</span>原价</div></label>
					<label class="control-label"><span>￥${map.specialPrice }<span class="divider">/</span>￥${map.bookPrice }价格</span></label>
					<div class="controls">
					<input type="hidden" name="bookId" value="${map.bookId}"/>
					<input type="hidden" value="${LOGIN_USER_KEY_IN_SESSION.userId}" name="userId"/> 
					<input type="number" name="quantity" class="span1" placeholder="数量" style="height:40px" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"/>
					  <button type="submit" class="btn btn-large btn-primary pull-right"> 立即购买 <i class=" icon-shopping-cart"></i></button>
					</div>
				  </div>
				</form>
				</c:if>
				<c:if test="${empty LOGIN_USER_KEY_IN_SESSION}">
				<form class="form-horizontal qtyFrm" action="${contextPath}/gotoLogin" method="get">
				  <div class="control-group">
					<label class="control-label"><div>特价<span class="divider">/</span>原价</div></label>
					<label class="control-label"><span>￥${map.specialPrice }<span class="divider">/</span>￥${map.bookPrice }价格</span></label>
					<div class="controls">
					<input type="number" name="quantity" class="span1" placeholder="数量" style="height:40px" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"/>
					  <button type="submit" class="btn btn-large btn-primary pull-right"> 立即购买 <i class=" icon-shopping-cart"></i></button>
					</div>
				  </div>
				</form>
				</c:if>
				<hr class="soft"/>
				<h4>库存数量：</h4>
				${map.stockNumber }
				<hr class="soft clr"/>
				<p>
		书本描述:
				</p>${map.bookDescription }
				<br class="clr"/>
			<hr class="soft"/>
			</div>
			
			<div class="span9">
            <ul id="productDetail" class="nav nav-tabs">
              <li class="active"><a href="${contextPath}/listComment/${map.bookId}" data-toggle="tab">图书评价</a></li>
 
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade active in" id="home">
			  <h4>图书信息</h4>
                <table class="table table-bordered">
				<tbody>				
				<tr class="techSpecRow"><th colspan="2">图书规格</th></tr>
				<tr class="techSpecRow"><td class="techSpecTD1">图书名字</td><td class="techSpecTD2">${map.bookName }</td></tr>
				<tr class="techSpecRow"><td class="techSpecTD1">图书作者</td><td class="techSpecTD2">${map.bookAuthor }</td></tr>
				<tr class="techSpecRow"><td class="techSpecTD1">出版社</td><td class="techSpecTD2">${map.bookPub }</td></tr>
				<tr class="techSpecRow"><td class="techSpecTD1">ISBN</td><td class="techSpecTD2">${map.ISBN }</td></tr>
				<tr class="techSpecRow"><td class="techSpecTD1">库存数量:</td><td class="techSpecTD2">${map.stockNumber }</td></tr>
				</tbody>
				<tr class="techSpecRow"><td class="techSpecTD1"><a href="${contextPath}/addComment/${map.bookId}" data-toggle="modal" style="padding-right:0"><div class="btn btn-large btn-success">增加评论</div></a></td></tr>
				</table>
				
				
              </div>
	
		</div>
          </div>
	</c:forEach>
	
	<!-- 显示评价 -->
		<div class="span9">
		<c:if test="${empty comments }">
			该图书暂无评论
		</c:if>
		<c:if test="${not empty comments }">
		<h4>该书所有评论</h4>
			  <ul class="thumbnails">
			  
				<div class="span6">
					<table class="table">
			        <thead>
			          <tr>
			            <th>评论行数</th>
			            <th>作者</th>
			            <th>评论时间</th>
			            <th>评论</th>
			          </tr>
			        </thead>
			        <tbody>
			        <c:forEach items="${comments }" var="comment">
			          <tr>
			          	<td>${comment.commentId }</td>
			            <td>${comment.fromAuthor }</td>
			            <td>${comment.createTime }</td>
			            <td>${comment.description }</td>
			    
			          </tr>
			          </c:forEach>
			        </tbody>
			      </table>
				</div>
				
			  </ul>	
			          </c:if>     
		</div>
	</div>
</div>




		</div>
	</div>
</div>
<!-- Footer ================================================================== -->
	<div  id="footerSection">
	<div class="container">
	
		<p class="pull-right">&copy; 慧驾书城</p>
	</div><!-- Container End -->
	</div>
<!-- Placed at the end of the document so the pages load faster ============================================= -->
	<script src="${contextPath }/themes/js/jquery.js" type="text/javascript"></script>
	<script src="${contextPath }/themes/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="${contextPath }/themes/js/google-code-prettify/prettify.js"></script>
	
	<script src="${contextPath }/themes/js/bootshop.js"></script>
    <script src="${contextPath }/themes/js/jquery.lightbox-0.5.js"></script>
	
<span id="themesBtn"></span>
</body>
</html>